<template>
  <div class="app-container">
    <form-filter @on-filter="submitFilterForm" />
    <el-button type="primary" class="mgtop" @click="openDialog">添加</el-button>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..."   >
      <el-table-column label="任务ID"  prop="id" align="center"  >
      </el-table-column>
      <el-table-column label="游戏平台"  prop="gamePlatformId" align="center" >
         <template slot-scope="{row}">{{row.gamePlatformId|toConverter(GAME_PLATFORM_LIST)}}</template>
      </el-table-column>
      <el-table-column label="删除方式"  prop="deleteType" align="center" >
        <template slot-scope="{row}">{{row.deleteType|toConverter(DELETE_TYPE_LIST)}}</template>
      </el-table-column>
      <el-table-column label="发起人"  prop="creator" align="center" >
      </el-table-column>
       <el-table-column label="注单号集合"  prop="betNoArray" align="center" >
      </el-table-column>
       <el-table-column label="创建日期"  prop="createTime" align="center" >
         <template slot-scope="{row}">{{row.createTime | toTime('YYYY-MM-DD HH:mm:ss')}}</template>
      </el-table-column>
      <el-table-column label="索引日期"  prop="indexDate" align="center" >
      </el-table-column>
      <el-table-column label="删除开始时间"  prop="startTime" align="center"  >
        <template slot-scope="{row}">{{row.startTime | toTime('YYYY-MM-DD HH:mm:ss')}}</template>
      </el-table-column>
      <el-table-column label="删除结束时间"  prop="endTime" align="center"  >
        <template slot-scope="{row}">{{row.endTime | toTime('YYYY-MM-DD HH:mm:ss')}}</template>
      </el-table-column>

      <el-table-column label="审核人"  prop="checkOperator" align="center" ></el-table-column>
      <el-table-column label="审核状态"  prop="checkStatus" align="center" >
         <template slot-scope="{row}">{{row.checkStatus|toConverter(CHECK_STATUS_LIST)}}</template>
      </el-table-column>
      <el-table-column label="审核时间"  prop="checkTime" align="center" >
        <template slot-scope="{row}">{{row.checkTime | toTime('YYYY-MM-DD HH:mm:ss')}}</template>
      </el-table-column>
      <el-table-column label="执行状态"  prop="executeStatus" align="center" >
        <template slot-scope="{row}">{{row.executeStatus|toConverter(EXECUTE_STATUS_LIST)}}</template>
      </el-table-column>

      <el-table-column label="操作"  prop="withdrawTriggerNum" align="center" >
         <template slot-scope="{row}" >
           <div v-if="row.checkStatus==0">
            <el-button type="text" @click="check(row)"  v-if="roleCheck('data-check')" >审核</el-button>
            <el-button type="text" @click="todelete(row)"  v-if="roleCheck('data-delete')">删除</el-button>
           </div>
           <span v-else>--</span>
        </template>

      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="Number(tableData.total)">
      </el-pagination>
    </div>
     <AddDialog
      :dialogVisible="addDialogVisible"
      v-if="addDialogVisible"
      @cancel="addDialogVisible = false"
    />
    <el-dialog
    title="审核"
    width="600px"
    :show-close="false"
    :visible="dialogVisible">
      <el-radio-group v-model="checkStatus">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">不通过</el-radio>
      </el-radio-group>
      <div  style="text-align:right;width:100%">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toCheck">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import FormFilter from './taskDeleteFilter.vue';
import AddDialog from './dialog/addTaskDeleteDialog.vue';
import { grid } from '@/build';
import { messageType } from '@/const/enum';
import {
  jobList, jobListDelete, jobListCheck,
} from '@/services/api/gameDataManage';
import {
  GAME_PLATFORM_LIST, CHECK_STATUS_LIST, EXECUTE_STATUS_LIST, DELETE_TYPE_LIST,
} from './data';

export default {
  name: 'tab-one',
  mixins: [grid],
  components: {
    FormFilter,
    AddDialog,
  },

  data() {
    return {
      dialogVisible: false,
      GAME_PLATFORM_LIST,
      CHECK_STATUS_LIST,
      EXECUTE_STATUS_LIST,
      DELETE_TYPE_LIST,
      addDialogVisible: false,
      checkStatus: undefined,
      id: null,
      tableData: {
        list: [],
        total: 0,
      },
      filters: {
        checkStatus: null,
        executeStatus: null,
        gamePlatformId: null,
        page: 1,
        size: 20,
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
      },
    };
  },

  methods: {
    openDialog() {
      this.addDialogVisible = true;
      window.scrollTo(0, 0);
      // this.dialogData = row;
    },
    submitFilterForm(formInline) {
      const { time } = formInline;
      if (!_.isUndefined(time) && _.isArray(time)) {
        this.filters.startTime = time[0];
        this.filters.endTime = time[1];
        // [this.filters.startDate, this.filters.endDate] = time;
        // formInline = { ...formInline, msg_start_time, msg_end_time };
      } else {
        this.filters.startTime = undefined;
        this.filters.endTime = undefined;
      }
      this.filters = { ...this.filters, ...formInline };
      this.doGet({ action: 'getGrid' });
    },
    async todelete(data) {
      try {
        await this.$confirm('是否删除该任务?', '删除任务', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        const [status, result] = await jobListDelete({
          id: data.id,
        });
        if (!status) throw new Error(result.message);
        this.$message({
          type: 'success',
          message: '删除成功!', // 存在该等级的黑名单记录，无法删除！
        });
        this.doGet({ action: 'getGrid' });
      } catch (e) {
        if (e === messageType.cancel) return;
        this.$message({
          type: 'error',
          message: `删除失败!${e.message || ''}`,
        });
      }
    },
    check(row) {
      this.dialogVisible = true;
      this.id = row.id;
    },
    toCheck() {
      if (this.checkStatus) {
        this.doGet({ action: 'check' });
      } else {
        this.$message({
          type: 'error',
          message: '请选择审核状态',
        });
      }
    },
  },
  mounted() {
    this.bindGet(jobList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
    this.bindGet(jobListCheck, '', {
      action: 'check',
      // sendingData: { id: this.id, checkStatus: this.checkStatus },
      beforeSend: () => ({
        id: this.id,
        checkStatus: this.checkStatus,
      }),
      callback: ([result, data]) => {
        this.checkStatus = undefined;
        this.dialogVisible = false;
        if (result) {
          this.doGet({ action: 'getGrid' });
        } else {
          this.$message({
            type: 'error',
            message: data.message,
          });
        }
      },
    });
  },
};
</script>
<style scope lang="scss">
 .mgtop{
    margin-top:30px;
    margin-bottom: 10px;
  }
</style>
